<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="搜索" @clickLeft="clickLeft()"></uni-nav-bar>
		<view style="padding: 20rpx 30rpx;">
			<view class="tui-search-input">
				<view><uni-icons type="search" size="40" color='#bcbcbc' class="tui-pd-left"></uni-icons></view>
				<input type="text" confirm-type="search" placeholder="景点等" :focus="true"
				 placeholder-class="tui-input-plholder"
				 class="tui-input" v-model="dataForm.keyword" @confirm="goSearch('input')"/>
				<view @tap="cleanKey" v-show="dataForm.keyword">
					<uni-icons type="close" size="40" color='#bcbcbc' class="tui-pd-right"></uni-icons>
				</view>
			</view>
		</view>
		<!--<input type="text" v-model="dataForm.keyword" class="tui-input" placeholder="景点/专题/攻略等" @confirm="goSearch">-->

		<view class="tui-centerrecommend" v-if="list.length">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="tui-centerrecommend-item">
					<view class="tui-pd-bottom" v-for="(item, index) in list" :key="index" @tap="navTo(item)">
						<view class="tui-centerrecommend-flex">
							<view class="tui-center-image">
								<image class="tui-centerrecommend-img" :src="item.url" mode=""></image>
							</view>
							<block v-for="(skuItem, skuIdx) in item.skuStockList" :key="skuIdx">
								<view class="tui-center-box" v-if="skuIdx == 0">
									<view class="tui-center-title">{{item.title}}</view>
									<view>
										<text class="tui-centerrecommend-pric">￥{{skuItem.discoutPrice?skuItem.discoutPrice:skuItem.price}}元</text>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="list.length" class="cu-load text-gray" :class="loadStatus"></view>
		<load v-model="isLoading"></load>
		<empty v-if="emptyShow" text="没有您要的东西哦"></empty>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import empty from '@/components/empty/index.vue'
    import load from '@/components/empty/load.vue'
	
	export default {
		name: 'search',
		components: {
			uniIcons, empty, load
		},
		data() {
			return {
				dataForm: {
					pageNum: 1,
					pageSize: 10,
                    keyword: ""
				},
				list: [],
                lastPage: 1,
                isLoading: false,
                loadStatus: '',
                emptyShow: false
			}
		},
        onReachBottom() {
            if (this.dataForm.pageNum < this.lastPage) {
                this.dataForm.pageNum += 1
                this.goSearch()
            }
        },
		methods: {
			cleanKey: function() {
				this.dataForm.keyword = ''
			},
			goSearch(type) {
                let that = this
                that.isLoading = true
                that.loadStatus = 'loading'
                this.dataForm = {
					...this.dataForm,
                    pageNum: this.dataForm.pageNum
				}
				if (type == 'input') that.list = []
                // that.list = []
                this.emptyShow = false
				this.$api.api('search', this.dataForm).then(res => {
                    if (res.code == 200) {
                        res.data.list.forEach(item=>{
                            that.list.push(item);
                        })
                        that.isLoading = false
                        that.lastPage = res.data.totalPage
                        if (that.dataForm.pageNum < res.data.totalPage) {
                            that.loadStatus = ''
                        } else {
                            that.loadStatus = 'over'
                        }
                        if (type == 'input' && res.data.list.length == 0) {
                            this.emptyShow = true
						} else {
                            this.emptyShow = false
						}
					}  else {
                        this.$api.msg(res.message)
                    }
				}).catch(error => {
                    this.$api.msg(error.message)
				})
				// this.$Request.get('/tao/common/type/59').then(res => {
				// 	if (res.status == 0) {
				// 		if (res.data && res.data.value && res.data.value == '是') {
				// 			uni.navigateTo({
				// 				url: '/pages/productList/tProduct?searchKey=' + keywords
				// 			});
				// 		} else {
				// 			uni.navigateTo({
				// 				url: '/pages/productList/productList?searchKey=' + keywords
				// 			});
				// 		}
				// 	}
				// });
			},
            //	加载更多
            loadMore() {
                if (this.dataForm.pageNum < this.lastPage) {
                    this.dataForm.pageNum += 1
                    this.goSearch()
                }
            },
            clickLeft() {
                uni.navigateBack()
            },
            navTo(item) {
                uni.navigateTo({
                    // url: '/pages/index/components/details?content=' + item.detail
                    url: `/pagesA/ticket/components/ticketDetail?id=${item.spuId}`
                })
            }
		}
	}
</script>

<style lang="scss">
	.tui-search-input {
		width: 100%;
		height: 86rpx;
		border-radius: 35rpx;
		margin: 20rpx 0;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		.tui-input {
			flex: 1;
			color: #333;
			padding: 0 16rpx;
			font-size: 32rpx;
		}
		.tui-input-plholder {
			font-size: 32rpx;
			color: #b2b2b2;
		}
	}
	.tui-centerrecommend{
		margin: 20rpx 0;
		padding-bottom: 40rpx;
		.tui-centerrecommend-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 12rpx;
			.tui-pd-bottom {
				margin-bottom: 20rpx;
				background: #fff;
				border-radius: 15rpx;
				flex: 0 1 49.5%;
				overflow: hidden;
				line-height: 1.5;
			}
			.tui-centerrecommend-flex {
				.tui-center-image {
					border-radius: 15rpx 15rpx 0 0;
					width: 100%;
					height: 330rpx;
					overflow: hidden;
					text-align: center;
					background: #f2f2f2;
					position: relative;
					.tui-centerrecommend-img{
						border-radius: 15rpx 15rpx 0 0;
						width: 100%;
						height: 100%;
						position: absolute;
						left:0;
					}
				}
				.tui-center-box {
					padding: 15rpx;
					.tui-center-title {
						font-weight: 600;
						font-size: 34rpx;
					}
					.tui-centerrecommend-center {
						font-size: 28rpx;
						color: #666666;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.tui-centerrecommend-pric {
						font-size: $uni-font-size-lg;
						color: #FF7900;
						font-weight: 600;
					}
				}

			}
		}
	}
</style>
